<!--
 * @Date: 2021-10-18 16:42:12
 * @LastEditors: 邓春宜
 * @Desc: 
 * @LastEditTime: 2021-12-01 11:05:35
 * @FilePath: \tianjushi-kanban\src\components\text\IconText2.vue
--> 

<template>
 <div :class="outClass">

      <div class="icon_style">
        <component :is="currenTicon"></component>   
        <p><span>{{currenTicon}}</span></p>        
     </div>
     
      <div class="text_style">
           <p><span class="span span">设备:</span><span class="color_y span">{{title}}</span></p>
           <p><span class="span span">运行时常:</span><span class="span">{{totalTimes}}</span></p>
           <p><span class="span span">产量:</span><span class="span">{{yield}}</span></p>
          
       </div> 
  </div>						
</template>

<script>

import "static/css/kanban.less";
import ERR from "@/component/board/icons/Err.vue";
import ON from "@/component/board/icons/ON.vue";
import OFF from "@/component/board/icons/Off.vue";

export default {
  name: "ContentBlock",
  components:{
    ERR,
    ON,
    OFF
  },  
  props: {
    title: String,
    totalTimes:Number,
    yield:String,
    iconc:{
      type:String,
      default:"ERR"  
    },
    outClass:String,
    },
  data(){
    const str = "ERR、ON、OFF";
    if (str.includes(this.iconc))
      return {currenTicon:this.iconc};
    else
      return false;
    
  } 
};
</script>
<style>
.outs_style {
   width: 330px;
   height: 100%;
   position: relative; 
} 

.icon_style {
   width: 30%;
   height: 90%;
   float: left;
   text-align: center;
   margin:6px auto;
}
.text_style{
   width: 70%;
   height: 90%;
   float: left;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   margin:15px auto;
   display: block;
   float: left;
   text-align: left;
   }


.outs_bgcolor_on{
   background-color: rgba(6, 77, 158, 0.5);
	 border: 1px #00A0E9 dashed;
}

.outs_bgcolor_off {
	background-color: rgba(82, 87, 92, 0.5);
	border: 1px #858484 dashed;
}


.outs_bgcolor_err {
	background-color: rgba(226, 75, 55, 0.5);
	border: 1px #e4d7d7 dashed;
}

.span {
display:inline-block;
width:100px;
height:30px;
line-height:30px;
font-size: 22px;
text-align:left;
}



</style>